added caching and video player

2 files changed, 70 insertions, 1 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
new file mode 100644
index 0000000..8ec633f
--- /dev/null
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -0,0 +1,59 @@
+"use client";
+import styles from "../styles/info.module.css";
+import getVideoLink from "../components/videoLink";
+import React, { useState } from "react";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+
+export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
+	const [videoLink, setVideoLink] = useState(null);
+	const [episode, setEpisode] = useState("");
+
+	async function test(a, b, episodeText) {
+		let link = await getVideoLink(a, b);
+		setVideoLink(link);
+		setEpisode(episodeText);
+	}
+
+	return (
+		<div>
+			<div className={styles.EpisodesContainer}>
+				<h2>Episodes</h2>
+				<div className={styles.EpisodeButtons}>
+					{episodeData &&
+						episodeData.map((item, index) => (
+							<button
+								key={index}
+								onClick={() =>
+									test(item.id, dramaId, item.title)
+								}
+							>
+								{item.title}
+							</button>
+						))}
+				</div>
+			</div>
+			{videoLink && (
+				<div className={styles.VideoContainer}>
+					<MediaPlayer
+						title="dramaPlayer"
+						src={videoLink}
+						aspectRatio="16/9"
+						load="eager"
+						className={styles.VideoPlayer}
+						playsInline
+					>
+						<MediaProvider />
+						<PlyrLayout icons={plyrLayoutIcons} />
+					</MediaPlayer>
+					<p>{episode.toUpperCase()}</p>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index cd3af74..c891a0b 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -1,9 +1,14 @@
 import styles from "../styles/info.module.css";
 import Image from "next/image";
+import EpisodesButtons from "./buttons";
+import VideoLinkCacher from "../components/cacher";
+
 export default async function DramaInfo({ params }) {
 	const id = decodeURIComponent(params.id);
 	const info = await getDramaInfo(id);
 
+	await VideoLinkCacher(info.episodes, id);
+
 	return (
 		<div className={styles.Main}>
 			{info && (
@@ -19,6 +24,7 @@ export default async function DramaInfo({ params }) {
 						/>
 					</div>
 
+					{/* Drama description */}
 					<div className={styles.DramaDescription}>
 						<h2>Description</h2>
 						<p>{info.description}</p>
@@ -45,6 +51,9 @@ export default async function DramaInfo({ params }) {
 								</span>
 							))}
 					</div>
+
+					{/* Episodes Buttons */}
+					<EpisodesButtons data={info.episodes} id={id} />
 				</div>
 			)}
 		</div>
@@ -53,7 +62,8 @@ export default async function DramaInfo({ params }) {
 
 async function getDramaInfo(id) {
 	const res = await fetch(
-		`https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`,
+		{ next: { revalidate: 86400 } }
 	);
 	const data = await res.json();
 	return data;